<template>
  <div class="property-panel">
    <template v-if="selectedComponent">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="style" tab="样式属性">
          <FormProvider :form="form">
            <SchemaField :schema="styleSchema" />
          </FormProvider>
        </a-tab-pane>
        
        <a-tab-pane key="event" tab="事件属性">
          <FormProvider :form="form">
            <SchemaField :schema="eventSchema" />
          </FormProvider>
        </a-tab-pane>
        
        <a-tab-pane key="data" tab="数据属性">
          <FormProvider :form="form">
            <SchemaField :schema="selectedComponent.configData.config" />
          </FormProvider>
        </a-tab-pane>
      </a-tabs>
    </template>
    
    <div v-else class="empty-tip">
      <a-empty description="请选择一个组件进行配置" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/vue';
import { Input, InputNumber, Select, FormItem, Switch } from '@formily/antdv-x3';
import { useEditorStore } from '@/stores/editor';

const editorStore = useEditorStore();
const activeTab = ref('style');
const form = ref(createForm());
const { SchemaField } = createSchemaField({
  components: {
    Input,
    InputNumber,
    Select,
    FormItem,
    Switch,
  },
});

const selectedComponent = computed(() => editorStore.selectedComponent);

// 根据组件类型生成样式属性配置
const styleSchema = computed(() => {
  if (!selectedComponent.value) return {};
  
  // 基础样式属性
  const baseStyles = {
    width: {
      type: 'string',
      title: '宽度',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        placeholder: '请输入宽度',
        allowClear: true
      },
    },
    height: {
      type: 'string',
      title: '高度',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        placeholder: '请输入高度',
        allowClear: true
      },
    },
    margin: {
      type: 'string',
      title: '外边距',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        placeholder: '请输入外边距（如：10px 20px）',
        allowClear: true
      },
    },
    padding: {
      type: 'string',
      title: '内边距',
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-component-props': {
        placeholder: '请输入内边距（如：10px 20px）',
        allowClear: true
      },
    },
    display: {
      type: 'string',
      title: '显示方式',
      'x-decorator': 'FormItem',
      'x-component': 'Select',
      'x-component-props': {
        placeholder: '请选择显示方式',
        options: [
          { label: '块级元素', value: 'block' },
          { label: '行内元素', value: 'inline' },
          { label: '行内块元素', value: 'inline-block' },
          { label: '弹性布局', value: 'flex' }
        ]
      },
    },
  };

  // 根据组件类型添加特定样式
  const componentSpecificStyles = {};
  switch (selectedComponent.value.configData.field) {
    case 'Input':
    case 'Select':
      componentSpecificStyles['fontSize'] = {
        type: 'string',
        title: '字体大小',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-component-props': {
          placeholder: '请输入字体大小（如：14px）',
          allowClear: true
        },
      };
      componentSpecificStyles['color'] = {
        type: 'string',
        title: '字体颜色',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-component-props': {
          type: 'color',
          placeholder: '请选择字体颜色'
        },
      };
      break;
    case 'Container':
      componentSpecificStyles['backgroundColor'] = {
        type: 'string',
        title: '背景颜色',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-component-props': {
          type: 'color',
          placeholder: '请选择背景颜色'
        },
      };
      componentSpecificStyles['borderRadius'] = {
        type: 'string',
        title: '圆角',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-component-props': {
          placeholder: '请输入圆角大小（如：4px）',
          allowClear: true
        },
      };
      break;
  }

  return {
    type: 'object',
    properties: {
      style: {
        type: 'object',
        properties: {
          ...baseStyles,
          ...componentSpecificStyles
        }
      }
    }
  };
});

// 根据组件类型生成事件属性配置
const eventSchema = computed(() => {
  if (!selectedComponent.value) return {};

  const eventProperties = {};
  switch (selectedComponent.value.configData.field) {
    case 'Input':
      eventProperties['onChange'] = {
        type: 'string',
        title: '值改变事件',
        'x-decorator': 'FormItem',
        'x-component': 'Input.TextArea',
        'x-component-props': {
          placeholder: '请输入事件处理函数',
          autoSize: { minRows: 2, maxRows: 6 }
        },
      };
      eventProperties['onFocus'] = {
        type: 'string',
        title: '获得焦点事件',
        'x-decorator': 'FormItem',
        'x-component': 'Input.TextArea',
        'x-component-props': {
          placeholder: '请输入事件处理函数',
          autoSize: { minRows: 2, maxRows: 6 }
        },
      };
      eventProperties['onBlur'] = {
        type: 'string',
        title: '失去焦点事件',
        'x-decorator': 'FormItem',
        'x-component': 'Input.TextArea',
        'x-component-props': {
          placeholder: '请输入事件处理函数',
          autoSize: { minRows: 2, maxRows: 6 }
        },
      };
      break;
    case 'Select':
      eventProperties['onSelect'] = {
        type: 'string',
        title: '选择事件',
        'x-decorator': 'FormItem',
        'x-component': 'Input.TextArea',
        'x-component-props': {
          placeholder: '请输入事件处理函数',
          autoSize: { minRows: 2, maxRows: 6 }
        },
      };
      eventProperties['onChange'] = {
        type: 'string',
        title: '值改变事件',
        'x-decorator': 'FormItem',
        'x-component': 'Input.TextArea',
        'x-component-props': {
          placeholder: '请输入事件处理函数',
          autoSize: { minRows: 2, maxRows: 6 }
        },
      };
      eventProperties['onSearch'] = {
        type: 'string',
        title: '搜索事件',
        'x-decorator': 'FormItem',
        'x-component': 'Input.TextArea',
        'x-component-props': {
          placeholder: '请输入事件处理函数',
          autoSize: { minRows: 2, maxRows: 6 }
        },
      };
      break;
    case 'Container':
      eventProperties['onClick'] = {
        type: 'string',
        title: '点击事件',
        'x-decorator': 'FormItem',
        'x-component': 'Input.TextArea',
        'x-component-props': {
          placeholder: '请输入事件处理函数',
          autoSize: { minRows: 2, maxRows: 6 }
        },
      };
      break;
  }

  return {
    type: 'object',
    properties: {
      events: {
        type: 'object',
        properties: eventProperties
      }
    }
  };
});

// 监听选中组件变化，更新表单值
watch(selectedComponent, (newComponent) => {
  if (newComponent) {
    form.value.setValues(newComponent.configData.config);
  }
});

// 监听表单值变化，更新组件
watch(() => form.value.values, (newValues) => {
  if (selectedComponent.value) {
    editorStore.updateComponent(selectedComponent.value.id, newValues);
  }
}, { deep: true });
</script>

<style lang="less" scoped>
.property-panel {
  height: 100%;
  overflow-y: auto;
  
  :deep(.ant-tabs-nav) {
    margin-bottom: 16px;
  }
  
  :deep(.ant-form-item) {
    margin-bottom: 16px;
  }
}

.empty-tip {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>